<template>
  <m-box title="品质管理" size="small" class="quality-management">
    <ul class="w-row">
      <li class="w-item">
        <div class="w-item__title">当月来料合格率</div>
        <div class="w-item__content">
          <m-digital :number="iqcMonthRate" uom="%" color="#7FFF00" />
        </div>
      </li>
      <li class="w-item">
        <div class="w-item__title">当月成品合格率</div>
        <div class="w-item__content">
          <m-digital :number="oqcMonthRate" uom="%" color="#BA55D3" />
        </div>
      </li>
    </ul>
    <div class="m-content">
      <areaChart
        bar-name="数量"
        :loading="loading"
        :bar-width="30"
        :labels="labels"
        :data="top7Data"
      />
    </div>
  </m-box>
</template>
<script setup>
import http from '@/utils/request'
import moment from 'moment'
// import { numberFormat } from '@/utils/tools'
import areaChart from '@/views/Home/components/qualityManagement/widgets/areaChart/index.vue'

const iqcMonthRate = ref(0)
const oqcMonthRate = ref(0)

const loading = ref(false)
const labels = ref(
  Array.from({ length: 7 }).map((_, i) => moment().subtract(i, 'day').format('YYYY-MM-DD'))
)
const top7Data = ref(Array.from({ length: 7 }).map((_, i) => 0))
const getData = async () => {
  try {
    const res = await http.get('/v1/kanban/GetMOQualityReport')
    iqcMonthRate.value = res.iqcMonthRate
    oqcMonthRate.value = res.oqcMonthRate
  } catch (e) {
    console.error(e)
  }
  try {
    const res = await http.get('/v1/kanban/GetMOWeekDayOqcReport')
    let _label = []
    let _data = []
    res.ibiData.forEach((r) => {
      _label.push(r.startWeekTime)
      _data.push(r.count)
    })
    labels.value = _label
    top7Data.value = _data
  } catch (e) {
    console.error(e)
  }
}

function init() {
  getData()
}
onMounted(() => {
  init()
})
// 暴露方法
defineExpose({
  init
})
</script>
<style lang="less" scoped>
.quality-management {
  ::v-deep(.m-box__body) {
    overflow: auto;
    .dv-border-box-7 {
      .border-box-content {
        height: 100%;
        position: relative;
        .w-row {
          height: 20px;
          display: flex;
          justify-content: center;
          .w-item {
            flex: 1;
            vertical-align: baseline;
            text-align: center;
            .w-item__title {
              display: inline-block;
              padding: 0 10px;
              line-height: 20px;
            }
            .w-item__content {
              display: inline-block;
              position: relative;
              .m-digital {
                font-size: 16px;
                padding: 0;
              }
            }
          }
        }
        .m-content {
          height: calc(100% - 20px);
        }
      }
    }
  }
}
</style>
